<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0' />
		<title></title>
		<link rel="stylesheet" type="text/css" href="css/swiper.min.css"/>
		<style type="text/css">
			* {
					margin: 0;
					padding: 0;
					-webkit-text-size-adjust:none; 
				}
				html,
				body {
					height: 100%;
				}
				body {
					font-family: "microsoft yahei";
				}
				.swiper-container {
					width: 100%;
					height: 100%;
					overflow: hidden;
					position: relative;
				}
				.swiper-slide {
					width: 100%;
					height: 100%;
					margin:0px !important;
					-webkit-background-size:cover;
					background-size:cover;
				}
				.resize{
					position: absolute;
				}
				
		</style>
	</head>
	<body>
		<div class="swiper-container swiper-container-1"style="top:0;z-index:10;">
			<div class="swiper-wrapper">
				<section class="swiper-slide swiper-slide-1" style="background: url(images/1_head.png) no-repeat;">
					<img src="images/1_head.png" class="resize" style="width: 640px;height:960px ;" />
				</section>
				<section class="swiper-slide swiper-slide-2 slide-imp" style="background: url(images/juli_bg.png) no-repeat;">
					<img src="images/juli_bg.png" class="resize" style="width: 640px;height: 960px;z-index: 1;" />
				</section>

			</div>
		</div>
		
		<div class="swiper-container swiper-container-2 resize" style="top:0;z-index:9;">
			<div class="swiper-wrapper">
				<section class="swiper-slide swiper-slide-1" style="background: url(images/1_head.png) no-repeat;">
					<img src="images/1_head.png" class="resize" style="width: 640px;height:960px ;" />
				</section>
				<section class="swiper-slide swiper-slide-2 slide-imp" style="background: url(images/juli_bg.png) no-repeat;">
					<img src="images/juli_bg.png" class="resize" style="width: 640px;height: 960px;z-index: 1;" />
				</section>
               	<section class="swiper-slide swiper-slide-3" style="background: url(images/1_head.png) no-repeat;">
					<img src="images/1_head.png" class="resize" style="width: 640px;height:960px ;" />
				</section>
			</div>
		</div>
		<script src="js/jquery-1.9.1-min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/swiper.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			var width=window.innerWidth;
		    var height = window.innerHeight;
			var scaleW = width / 640;
			var	scaleH = height / 960;
			var resizes = document.querySelectorAll('.resize');
			for (var j = 0; j < resizes.length; j++) {
				resizes[j].style.width = parseInt(resizes[j].style.width) * scaleW + 'px';
				resizes[j].style.height = parseInt(resizes[j].style.height) * scaleH + 'px';
				resizes[j].style.top = parseInt(resizes[j].style.top) * scaleH + 'px';
				resizes[j].style.left = parseInt(resizes[j].style.left) * scaleW + 'px';
			}
			
			flag =[1,1]; 
			swipers1 = new Swiper('.swiper-container-1', {    
			    direction: 'vertical',    
				speed:1000,
				followFinger : false,
				onTouchMove: function(swiper){
                   	if(swiper.activeIndex==1&&flag[0]==1){
				        if(swiper.touches.startY-swiper.touches.currentY>20){
				        	flag[0] = 0
				        	$('.swiper-container-1').animate({'height':0},600,function(){
				        		flag[0] =1
				        	})
				        }
				    }
                 }
			});  
			swipers2 = new Swiper('.swiper-container-2', {    
		       	direction: 'vertical',    
			  	speed:1000,
			  	followFinger : false,
			  	onTouchMove: function(swiper){
                    if(swiper.activeIndex==0&&flag[1]==1){
                    	//上滑动
			        	if(swiper.touches.currentY-swiper.touches.startY>20){
			        		flag[1] = 0
			        		$('.swiper-container-1').animate({'height':height+'px'},600,function(){
			        			 flag[1] =1
			        		})
			        	}
			        }else if(swiper.activeIndex==2&&flag[1]==1){
			        	//下滑动
			        	if(swiper.touches.startY-swiper.touches.currentY>20){
			        		flag[1] = 0
			        		$('.swiper-container-2').animate({'height':0},600,function(){
			        			 flag[1] =1
			        		})
			        	   }
			           }
                }
		   	}); 
		</script>
	</body>
</html>
